<template>
  <el-dialog
    v-loading.lock="loading"
    class="base-dialog"
    :custom-class="'panna-dialog_big'"
    :append-to-body="true"
    :title="$t('ModuleDevice.components.selectEqu')"
    align="center"
    :visible.sync="innerDialogFormVisible"
    @closed="closeDialog"
  >
    <div class="deviceDialogList">
      <DeviceTable
        ref="deviceDialogList"
        :show-table-column="showTableColumn"
        :status-id="statusId"
        :checked-rows="checkedRows"
        :query-form-parent="queryFormParent"
        :not-display-text="notDisplayText"
        :display-text.sync="displayText"
        :device-id-list="deviceIdList"
        :multiple-select-state.sync="multipleSelectState"
        @confirmSelected="confirmSelected"
      ></DeviceTable>
    </div>
    <div
      v-if="multipleSelectState"
      slot="footer"
      class="dialog-footer"
      align="center"
    >
      <el-button type="primary" @click="onSubmit()">{{ btn.Save }}</el-button>
      <el-button @click="closeDialog">{{ btn.Off }}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import DeviceTable from "../views/Device/DeviceTable.vue";
export default {
  name: "DeviceDialogList",
  components: {
    DeviceTable,
  },
  props: {
    multipleSelectState: {
      type: Boolean, // 布尔
      default: true, // 必填
    },
    queryFormParent: {
      type: Object,
      default: () => {},
    },
    choiceDeviceNum: {
      type: Number,
      default: 0,
    },
    dialogFormVisible: {
      type: Boolean, // 布尔
      default: false, // 必填
    },
    checkedRows: {
      type: Array, // 布尔
      default: () => [], // 必填
    },
    displayText: {
      type: Array,
      default: () => [],
    },
    notDisplayText: {
      type: Array,
      default: () => [],
    },
    deviceIdList: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      loading: false,
      showTableColumn: false,
      innerDialogFormVisible: false,
      statusId: 1,
    };
  },
  computed: {
    btn() {
      return this.$t("ModuleDevice.buttons");
    },
  },
  mounted() {
    this.innerDialogFormVisible = this.dialogFormVisible;
    this.initData();
  },
  created() {},
  methods: {
    confirmSelected(row) {
      this.$emit("closeChoiceDevice", row);
      this.innerDialogFormVisible = false;
      this.$emit("update:dialogFormVisible", false);
    },
    initData() {},
    onSubmit() {
      var rows = this.$refs.deviceDialogList.$refs.deviceTagTable.selection;
      if (this.choiceDeviceNum === 0) {
        this.$emit("checkedRowsFun", rows);
        this.innerDialogFormVisible = false;
        this.$emit("update:dialogFormVisible", false);
      } else {
        if (this.choiceDeviceNum === rows.length) {
          this.$emit("checkedRowsFun", rows);
          this.innerDialogFormVisible = false;
          this.$emit("update:dialogFormVisible", false);
        } else {
          this.$message("只能选择" + this.choiceDeviceNum + "条数据");
          return false;
        }
      }
    },

    closeDialog() {
      this.$refs.deviceDialogList.cancelForm();
      this.$emit("update:dialogFormVisible", false);
    },
  },
};
</script>
<style scoped lang="scss">
.deviceDialogList {
  ::v-deep .el-form--inline {
    text-align: left;
    float: left;
  }
  ::v-deep .base-content-operate {
    text-align: left;
  }
}
</style>
